<template>
  <div>
    <div>
      <div class="router">
        <div class="route" v-for="(item, index) in routeList" :key="index">
          <div class="router-view" v-if="index === 0">
            <img class="back" id="back" src="@/assets/zhome/back.png" alt />
            <span class="border"></span>
            <img class="back" src="@/assets/zhome/home.png" alt />
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="router-next" v-else>
            <span class="bor"></span>
            <span class="title">{{ item.title }}</span>
          </div>
          <img v-if="index !== routeList.length - 1" class="icon-right" src="@/assets/zhome/right.png" alt />
        </div>
      </div>
      <!-- 专利民事诉讼 -->
      <div class="contnetTop-title">{{ serviceHeader.title }}</div>
      <div class="contnetTop-text">
        {{ serviceHeader.describe }}
      </div>
      <div v-if="attrsLength != 0">
        <div class="routeList-type" v-for="(item, index) in serviceHeader.attrs" :key="index">
          <div class="type">{{ item.attr_name }}</div>
          <div class="type-box">
            <div :class="val.selected ? 'select ' : ''" class="type-item" v-for="(val, valIndex) in item.valus"
              :key="valIndex" @click="comboMealIndex(item, val, valIndex)">
              <span>{{ val.suk }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="comboMeal-type">
        <div class="type">套餐选择</div>
        <div class="type-box">
          <div :class="index === isIndexMeal ? 'select ' : ''" class="type-item" v-for="(item, index) in comboMeal"
            :key="index" @click="comboMealIndex(index)">
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div> -->
      <div class="price-box">
        <div class="price">
          <span>￥{{ serviceHeader.price }}</span>
          <span>件起</span>
        </div>
      </div>
      <div class="carousel_but">
        <el-button style="width: 140px" plain size="large">加入购物车</el-button>
        <el-button style="width: 140px" color="#0052d9" size="large">立即购买</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import serviceApi from "@/api/modules/lawyer.js"

const id = ref(2)
const serviceHeader = reactive({})
const attrsLength = ref(0)
const getService = async () => {
  let res = await serviceApi.getService(id.value)
  if (res.code === 1) {
    Object.assign(serviceHeader, res.data)
    attrsLength.value = serviceHeader.attrs.length
    serviceHeader.attrs.map(item => {
      // 为每个 valus 中的项目添加 selected 属性，并初始化为 false，表示未选中状态
      item.valus.forEach(val => {
        val.selected = false;
      });
      return item;
    });
  }
  console.log(serviceHeader, "@@@@@");
  console.log(attrsLength.value);
}
const isIndex = ref(0)
const isIndexMeal = ref(0)
let routeList = ref([
  { title: "服务商城", url: "/home" },
  { title: "案件服务" },
  { title: "其他案件代理服务" },
]);
const product = reactive([
  { title: "劳动仲裁/争议" },
  { title: "合同纠纷" },
  { title: "债务纠纷" },
  { title: "债务纠纷" },
  { title: "知识产权及不正当竞争纠" },
  { title: "房产纠纷" },
  { title: "建设工程纠纷" },
  { title: "婚姻家庭" },
  { title: "交通事故" },
  // { title: '专利权权属纠纷' },
  // { title: '专利侵权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' }
]);
const comboMeal = reactive([
  { title: "我是原告" },
  { title: "我是被告(第三人)" },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
]);
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
const selectIndex = (index) => {
  isIndex.value = index;
};
const comboMealIndex = (item, values, index) => {
  console.log(index);
  // console.log(val);
  // val.selected = !val.selected;
  // isIndex.value = index;
  item.valus.forEach(val => {
    val.selected = val === values; // 设置当前点击的项目为选中状态，其他项目为未选中状态
  });
  console.log(values);

};
onMounted(() => {
  getService()
})
</script>

<style lang="scss" scoped>
.contnetTop {
  // overflow: hidden;
  display: flex;
  justify-content: space-between;

  .router {
    display: flex;
    margin-top: 10px;

    .title {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #575966;
    }

    .route {
      display: flex;
      align-items: center;

      .icon-right {
        width: 10px;
        height: 10px;
        margin: 0 10px;
      }
    }

    &-next {
      padding: 0 12px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .bor {
        width: 6px;
        height: 6px;
        background: #0052d9;
        border-radius: 3px;
        margin-right: 10px;
      }
    }

    &-view {
      padding: 0 12px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .border {
        width: 1px;
        height: 10px;
        background: #d8d8d8;
        margin: 0 12px;
      }

      .title {
        margin-left: 10px;
      }

      .back {
        width: 14px;
        height: 14px;
      }
    }
  }

  .contnetTop-title {
    width: 288px;
    height: 50px;
    font-size: 36px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #202020;
    line-height: 50px;
    margin-top: 30px;
  }

  .contnetTop-text {
    width: 384px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #575966;
    line-height: 22px;
    margin-top: 20px;
  }

  .routeList-type {
    display: flex;
    // align-items: center;
    margin-top: 20px;
    // flex-wrap: wrap;

    .type-box {
      // display: flex;
      flex-wrap: wrap;
      flex: 1;
      display: flex;
      // align-items: flex-start;
      // justify-content: flex-start;
      // width: 500px
    }

    .type {
      width: 56px;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
      margin: 9px 15px 0 0;
      // justify-self: flex-end;
    }

    .type-item {
      // width: 104px;
      height: 28px;
      background: #ffffff;
      border-radius: 2px;
      margin: 5px 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 5px 10px;
      cursor: pointer;

      span {
        // width: 84px;
        height: 16px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        // color: #181818;
        line-height: 16px;
      }
    }

    .select {
      border: 1px solid #004cd1;
      color: #0052d9;
    }
  }

  .comboMeal-type {
    display: flex;
    // align-items: center;
    margin-top: 20px;

    .type-box {
      flex-wrap: wrap;
      flex: 1;
      display: flex;
    }

    .type {
      width: 56px;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
      margin: 9px 15px 0 0;
    }

    .type-item {
      // width: 104px;
      height: 28px;
      background: #ffffff;
      border-radius: 2px;
      margin: 5px 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      cursor: pointer;

      span {
        // width: 84px;
        height: 16px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        // color: #181818;
        line-height: 16px;
      }
    }

    .select {
      border: 1px solid #004cd1;
      color: #0052d9;
    }
  }

  .price-box {
    .price {
      margin-top: 20px;

      :nth-child(1) {
        width: 91px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ff4d00;
        line-height: 32px;
      }

      :nth-child(2) {
        width: 28px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #181818;
        line-height: 22px;
      }
    }
  }

  .carousel_but {
    margin: 20px 0;
  }

  .consultation-box {
    // position: relative;
    display: flex;
  }

  .consultation {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 125px;
    background: linear-gradient(180deg, #ebf3ff, #ffffff);
    border: 1.5px solid #ffffff;
    border-radius: 24px;
    box-shadow: 0px 4px 20px 0px rgba(213, 218, 227, 0.5);
    position: absolute;
    right: -70px;
    top: 70px;

    .el-icon {
      font-weight: bold;
    }

    span {
      width: 16px;
      height: 84px;
      font-size: 16px;
      font-family: PingFang TC, PingFang TC-Regular;
      font-weight: bold;
      text-align: left;
      color: #202020;
      line-height: 21px;
    }
  }
}
</style>
